 <<template>
 <div class="container">
    <Breadcrumb
      :items="['系统管理', '部门管理']"
    />
    <a-card direction="vertical" :size="12" fill :title="`部门管理`">
      <!-- <a-button type="primary" class="m-b-10" @click="editDepartment">
        <template #icon>
          <icon-plus />
        </template>新增部门
      </a-button> -->
      <a-button type="primary" class="m-b-10 m-l-10" @click="editAccount">
        <template #icon>
          <icon-plus />
        </template>新增账号
      </a-button>
      <a-table :columns="columns" :data="tabledata" :row-selection="rowSelection">
        <template #role="{ record }">
          {{getRoleName(record.role)}}
        </template>
      </a-table>
    </a-card>
    <!-- 编辑部门对话框 -->
    <SaveDepartmentDialog ref="saveDepartmentDialog" />
    <!-- 编辑账号对话框 -->
    <SaveAccountDialog ref="saveAccountDialog" />
  </div>
</template>

<script lang="ts" setup>
import SaveDepartmentDialog from './components/saveDepartmentDialog.vue';
import SaveAccountDialog from './components/saveAccountDialog.vue';
import { getAllAccount } from '@/api/user';
import { ref } from 'vue';
const saveDepartmentDialog = ref();
const saveAccountDialog = ref(null);
const editDepartment = () => {
  saveDepartmentDialog.value.openDialog();
};
const rolesList = ref([
  { label: '管理员', value: 'admin' },
  { label: '生产科', value: 'produce' },
  { label: '勾兑', value: 'blend' },
  { label: '供应科', value: 'supply' },
  { label: '库房', value: 'inventory' },
]);
const getRoleName = (role) => {
  const roleItem = rolesList.value.find((item) => item.value === role);
  return roleItem?.label;
};
const getAllList = async () => {
  const { code, data } = await getAllAccount({});
  if (code === 200) {
    tabledata.value = data;
  }
};
getAllList();
const editAccount = () => {
  saveAccountDialog.value.openDialog();
};
const columns = [
  {
    title: '编号',
    dataIndex: 'id',
  },
  {
    title: '账号',
    dataIndex: 'account',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
  },
  {
    title: '角色',
    slotName: 'role',
  },
];
const tabledata = ref([]);
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
  margin-bottom: 20px;
}

.title-fix {
  margin: 0 0 12px 0;
  font-size: 14;
}
:deep(.section-title) {
  margin: 0 0 12px 0;
  font-size: 14px;
}
.space-unit {
  background: white;
}
</style>